<template>
	<view class="bg">
		<div class="section">
			<text>基本信息</text>
		</div>
		<div class="form-items" ref="formRef">
			<div class="form-item">
				<div class="item-label">
					<div class="item-require">
						<img src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/ac115881-2beb-46c3-8dfc-6b2618e0712a.png"
							alt="">
					</div>
					商品名称
				</div>
				<div class="item-value">
					<textarea placeholder="请输入" v-model="formData.name"></textarea>
				</div>
			</div>
			<div class="form-item">
				<div class="item-label">
					<div class="item-require"></div>
					名称补充语
				</div>
				<div class="item-value">
					<textarea placeholder="请输入" v-model="formData.name_suffix"></textarea>
				</div>
			</div>
			<div class="form-item">
				<div class="item-label">
					<div class="item-require">
						<img src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/ac115881-2beb-46c3-8dfc-6b2618e0712a.png"
							alt="">
					</div>
					商品类目
				</div>
				<div class="item-value">
					<div class="item-select">
						<picker mode="multiSelector" @change="onchangeCat" :range="catData">
							{{formData.category || '请选择'}}
						</picker>
					</div>
					<img class="right-arrow"
						src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/8229fa01-36ef-4caf-a055-811c9cb11011.png"
						alt="">
					<!-- <textarea placeholder="请输入" v-model="formData.category"></textarea> -->
				</div>
			</div>
			<div class="form-item icon-item">
				<div class="item-label">
					<div class="item-require">
						<img src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/ac115881-2beb-46c3-8dfc-6b2618e0712a.png"
							alt="">
					</div>
					商品图片
				</div>
				<div class="item-value item-icons">
					<div class="img-icon" v-for="(item, idx) in formData.image" :key="'img' + idx">
						<img :src="item" alt="">
					</div>
				</div>
			</div>
			<div class="form-item flex-row-center">
				<div class="item-label">
					<div class="item-require">
						<img src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/ac115881-2beb-46c3-8dfc-6b2618e0712a.png"
							alt="">
					</div>
					店内分类
				</div>
				<div class="item-value">
					<div class="item-select">
						<picker @change="onChangeStoreCat" :range="storeCatData">
							{{ formData.store_category || '请选择' }}
						</picker>
					</div>
					<img class="right-arrow"
						src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/8229fa01-36ef-4caf-a055-811c9cb11011.png"
						alt="">
				</div>
			</div>
		</div>
		<div class="section">
			<text>售卖信息</text>
			<text class="norm-count" v-if="formData.norm > 0">共
				<text>{{formData.norm}}</text>
				个规格</text>
		</div>
		<div class="form-item">
			<div class="item-label">
				<div class="item-require">
					<img src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/ac115881-2beb-46c3-8dfc-6b2618e0712a.png"
						alt="">
				</div>
				售卖规格
			</div>
			<div class="item-value">
				<input placeholder="请输入" v-model="formData.specifications"></input>
			</div>
		</div>
		<div class="form-item">
			<div class="item-label">
				<div class="item-require">
				</div>
				条形码
			</div>
			<div class="item-value">
				<input placeholder="请输入" v-model="formData.barcode"></input>
			</div>
		</div>
		<div class="form-item">
			<div class="item-label">
				<div class="item-require">
					<img src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/ac115881-2beb-46c3-8dfc-6b2618e0712a.png"
						alt="">
				</div>
				价格
			</div>
			<div class="item-value">
				<input placeholder="请输入" v-model="formData.price"></input>
			</div>
		</div>
		<div class="form-item">
			<div class="item-label">
				<div class="item-require">
					<img src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/ac115881-2beb-46c3-8dfc-6b2618e0712a.png"
						alt="">
				</div>
				库存
			</div>
			<div class="item-value">
				<input placeholder="请输入" v-model="formData.stock"></input>
			</div>
		</div>
		<div class="form-item">
			<div class="item-label">
				<div class="item-require">
				</div>
				店内码/货号
			</div>
			<div class="item-value">
				<input placeholder="请输入" v-model="formData.barcode"></input>
			</div>
		</div>
		<div class="save-btn">保存</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formRef: null,
				formData: {
					name: '', // 商品名称
					name_suffix: '', // 名称补充语
					category: '', // 商品类目
					image: ['https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/7cb982d9-4161-47ee-a088-e93e557d0813.png',
						'https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/7cb982d9-4161-47ee-a088-e93e557d0813.png'
					], // 商品图片
					store_category: '', // 店内分类
					specifications: '', // 售卖规格（可包含多个规格对象，如尺寸、颜色等）
					barcode: '', // 条形码
					price: 0, // 售价（单位：元或分，需统一）
					stock: 0, // 库存数量
					norm: 1, // 多少个规格
					store_code: '' // 店内码 / 货号
				},
				storeCatData: ['测试一', '测试二', '测试三'],
				catData: [
					['中药', '西药', '医疗器械'],
					['感冒类', '止痛类', '抗生素'],
					['感冒灵颗粒', '布洛芬片', '阿莫西林胶囊阿莫西林胶囊阿莫西林胶囊阿莫西林胶囊']
				],
				catIndex: [0, 0, 0]
			}
		},
		methods: {
			onChangeStoreCat(e) { // 点击店内分类
				console.log(e)
				const idx = parseInt(e.detail.value)
				this.formData.store_category = this.storeCatData[idx]
			},
			onchangeCat(e) { // 点击商品分类
				this.catIndex = e.detail.value;
				const [i, j, k] = this.catIndex;
				this.formData.category = `${this.catData[0][i]} > ${this.catData[1][j]} > ${this.catData[2][k]}`;
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.section {
		width: 100%;
		background-color: #F5F6F9;
		height: 100rpx;
		font-size: 30rpx;
		font-weight: 500;
		display: flex;
		align-items: center;

		text {
			margin-left: 30rpx;
		}

		.norm-count {
			color: #666;
			font-size: 20rpx;
			margin-top: 4rpx;
			margin-left: 20rpx;

			text {
				margin-left: 0;
				color: #CA7A41;
			}
		}
	}

	.form-items {
		display: flex;
		flex-direction: column;
	}


	.form-item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		// min-height: 88rpx;
		border-bottom: 1px solid #FAFAFA;

		.item-require {
			margin-left: 20rpx;
			width: 40rpx;
			height: 40rpx;
			margin-top: -4rpx;
			margin-right: -10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item-label {
			font-size: 24rpx;
			color: #333;
			width: 180rpx;
			display: flex;
			flex-direction: row;
		}

		.item-value {
			width: 520rpx;
			min-height: 40rpx;
			margin-left: 40rpx;
			position: relative;

			textarea {
				height: 120rpx;
				padding-top: 4rpx;
				font-size: 26rpx;
				width: 100%;
			}

			input {
				font-size: 26rpx;
			}

			.right-arrow {
				position: absolute;
				right: 30rpx;
				width: 30rpx;
				height: 30rpx;
				top: 10rpx;
			}

			.item-select {
				font-size: 24rpx;
				font-weight: normal;
				color: #000;
				width: 400rpx;
				height: auto;
				min-height: 40rpx;

				picker {
					min-height: 40rpx;
				}
			}
		}
	}

	.icon-item {
		display: flex;
		flex-direction: column;

		.item-icons {
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;

			.img-icon {
				width: 120rpx;
				height: 120rpx;
				margin-left: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.flex-row-center {
		align-items: center !important;
	}

	.save-btn {
		width: 710rpx;
		margin: 40rpx 20rpx 100rpx 20rpx;
		background-color: #FEDC3D;
		height: 88rpx;
		color: #000;
		font-weight: 400;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
	}
</style>